<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Excel转SQLite数据库工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            padding-top: 20px;
        }
        .container {
            max-width: 800px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
        }
        .header h1 {
            color: #343a40;
            font-weight: 600;
        }
        .drop-area {
            border: 2px dashed #6c757d;
            border-radius: 10px;
            padding: 30px 15px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 15px;
        }
        .drop-area:hover, .drop-area.dragover {
            border-color: #007bff;
            background-color: rgba(0, 123, 255, 0.05);
        }
        .drop-area i {
            font-size: 36px;
            color: #6c757d;
            margin-bottom: 10px;
        }
        .drop-area p {
            color: #6c757d;
            margin-bottom: 0;
        }
        .form-section {
            display: none;
            margin-top: 30px;
        }
        .result-section {
            display: none;
            margin-top: 30px;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0069d9;
            border-color: #0062cc;
        }
        .btn-success {
            background-color: #28a745;
            border-color: #28a745;
        }
        .btn-success:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }
        .progress {
            height: 25px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .progress-bar {
            font-size: 14px;
            line-height: 25px;
        }
        .alert {
            margin-top: 20px;
        }
        .file-info {
            margin-top: 15px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 5px;
            border: 1px solid #e9ecef;
        }
        .download-btn {
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .no-list-style {
            list-style-type: none;
            padding-left: 0;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Excel转SQLite数据库工具</h1>
            <p class="text-muted">For Android v${APP_VERSION}</p>
        </div>
        
        <div id="upload-section">
            <div id="drop-area" class="drop-area">
                <i class="fas fa-file-excel"></i>
                <h5>拖拽Excel或CSV文件到这里</h5>
                <p>或者点击选择文件</p>
                <input type="file" id="file-input" style="display: none" accept=".xlsx,.csv">
            </div>
            <div id="file-info" class="file-info" style="display: none">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <i class="fas fa-file-excel text-success me-2"></i>
                        <span id="file-name"></span>
                    </div>
                    <button class="btn btn-sm btn-outline-danger" id="remove-file">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
            
            <div id="feature-intro" class="mt-4 p-3 bg-light border rounded">
                <h5 class="mb-3">提示：</h5>
                <ol class="no-list-style">
                    <li>1️⃣ 前往 <a href="https://gitee.com/zwo-wifi/zwoastro-image-and-db" class="external-link">gitee仓库</a> 下载 excel/csv 文件；</li>
                    <li>2️⃣ 按步骤生成加密数据库，并上传至网盘存档；</li>
                    <li>3️⃣ 通知开发更新项目；</li>
                    <li>🏫 小工具由 AI 生成，欢迎<a href="https://gitee.com/lygdhy/android_excel2db_translator" class="external-link">交流学习</a>；</li>
                </ol>
            </div>
        </div>
        
        <div id="form-section" class="form-section">
            <h4 class="mb-4">确认信息</h4>
            <form id="convert-form">
                <div class="mb-3">
                    <label for="version" class="form-label">数据库版本</label>
                    <input type="text" class="form-control" id="version" name="version" required>
                    <div class="form-text">版本格式为 n.n.n（n为数字）</div>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">加密密码</label>
                    <input type="text" class="form-control" id="password" name="password" value="pwc9UhwS0I9t0x74" readonly>
                    <div class="form-text">固定密码，不可修改</div>
                </div>
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary" id="convert-btn">开始转换</button>
                </div>
            </form>
        </div>
        
        <div id="progress-section" style="display: none">
            <h4 class="mb-4">处理中...</h4>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" id="progress-bar">0%</div>
            </div>
            <p class="text-center" id="progress-text">正在准备转换...</p>
        </div>
        
        <div id="result-section" class="result-section">
            <div class="alert alert-success">
                <i class="fas fa-check-circle me-2"></i>
                <span id="success-message">转换完成！您可以下载以下文件：</span>
            </div>
            <div class="d-flex flex-wrap mt-4">
                <div class="download-btn">
                    <a href="#" class="btn btn-success" id="download-normal-btn" role="button">
                        <i class="fas fa-download me-2"></i>
                        下载普通数据库
                    </a>
                </div>
                <div class="download-btn">
                    <a href="#" class="btn btn-success" id="download-encrypted-btn" role="button">
                        <i class="fas fa-lock me-2"></i>
                        下载加密数据库
                    </a>
                </div>
            </div>
            <div class="mt-4">
                <button class="btn btn-outline-primary" id="restart-btn">
                    <i class="fas fa-redo me-2"></i>
                    重新开始
                </button>
            </div>
        </div>
        
        <div id="error-section" style="display: none">
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <span id="error-message"></span>
            </div>
            <div class="mt-4">
                <button class="btn btn-outline-primary" id="error-restart-btn">
                    <i class="fas fa-redo me-2"></i>
                    重新开始
                </button>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 处理外部链接点击
            document.querySelectorAll('.external-link').forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const url = this.getAttribute('href');
                    if (window.electronAPI) {
                        window.electronAPI.openExternalLink(url);
                    } else {
                        window.open(url, '_blank');
                    }
                });
            });
            const dropArea = document.getElementById('drop-area');
            const fileInput = document.getElementById('file-input');
            const fileName = document.getElementById('file-name');
            const fileInfo = document.getElementById('file-info');
            const removeFile = document.getElementById('remove-file');
            const uploadSection = document.getElementById('upload-section');
            const formSection = document.getElementById('form-section');
            const convertForm = document.getElementById('convert-form');
            const versionInput = document.getElementById('version');
            const progressSection = document.getElementById('progress-section');
            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');
            const resultSection = document.getElementById('result-section');
            const downloadNormal = document.getElementById('download-normal');
            const downloadEncrypted = document.getElementById('download-encrypted');
            const restartBtn = document.getElementById('restart-btn');
            const errorSection = document.getElementById('error-section');
            const errorMessage = document.getElementById('error-message');
            const errorRestartBtn = document.getElementById('error-restart-btn');
            
            let selectedFile = null;
            
            // 拖拽事件处理
            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, preventDefaults, false);
            });
            
            function preventDefaults(e) {
                e.preventDefault();
                e.stopPropagation();
            }
            
            ['dragenter', 'dragover'].forEach(eventName => {
                dropArea.addEventListener(eventName, highlight, false);
            });
            
            ['dragleave', 'drop'].forEach(eventName => {
                dropArea.addEventListener(eventName, unhighlight, false);
            });
            
            function highlight() {
                dropArea.classList.add('dragover');
            }
            
            function unhighlight() {
                dropArea.classList.remove('dragover');
            }
            
            // 处理文件拖放
            dropArea.addEventListener('drop', handleDrop, false);
            
            function handleDrop(e) {
                const dt = e.dataTransfer;
                const files = dt.files;
                
                if (files.length > 0) {
                    handleFiles(files[0]);
                }
            }
            
            // 点击选择文件
            dropArea.addEventListener('click', () => {
                fileInput.click();
            });
            
            fileInput.addEventListener('change', (e) => {
                if (e.target.files.length > 0) {
                    handleFiles(e.target.files[0]);
                }
            });
            
            // 处理选择的文件
            function handleFiles(file) {
                // 清除之前的错误信息
                errorSection.style.display = 'none';
                resultSection.style.display = 'none';
                
                if (!file.name.endsWith('.xlsx') && !file.name.endsWith('.csv')) {
                    showError('只支持Excel (.xlsx) 或CSV (.csv) 文件');
                    return;
                }
                
                selectedFile = file;
                fileName.textContent = file.name;
                fileInfo.style.display = 'block';
                formSection.style.display = 'block';
                
                // 隐藏功能介绍区域
                document.getElementById('feature-intro').style.display = 'none';
                
                // 从文件名中提取版本号
                extractVersionFromFile(file);
            }
            
            // 从文件名中提取版本号
            function extractVersionFromFile(file) {
                // 从文件名中提取版本号（简化版）
                const fileName = file.name;
                const versionMatch = fileName.match(/v?(\d+\.\d+\.\d+)/i);
                if (versionMatch) {
                    versionInput.value = versionMatch[1];
                }
            }
            
            // 移除选择的文件
            removeFile.addEventListener('click', () => {
                resetForm();
            });
            
            // 重置表单
            function resetForm() {
                selectedFile = null;
                fileInput.value = '';
                fileName.textContent = '';
                fileInfo.style.display = 'none';
                formSection.style.display = 'none';
                versionInput.value = '';
            }
            
            // 提交表单开始转换
            convertForm.addEventListener('submit', (e) => {
                e.preventDefault();
                
                if (!selectedFile) {
                    showError('请先选择Excel文件');
                    return;
                }
                
                const version = versionInput.value.trim();
                if (!version) {
                    showError('请输入数据库版本');
                    return;
                }
                
                // 验证版本号格式
                const versionPattern = /^\d+\.\d+\.\d+$/;
                if (!versionPattern.test(version)) {
                    showError('版本号格式不正确，应为 n.n.n（n为数字）');
                    return;
                }
                
                // 开始转换
                startConversion();
            });
            
            // 开始转换过程
            function startConversion() {
                uploadSection.style.display = 'none';
                formSection.style.display = 'none';
                progressSection.style.display = 'block';
                
                const formData = new FormData();
                formData.append('file', selectedFile);
                
                // 模拟进度
                let progress = 0;
                const progressInterval = setInterval(() => {
                    progress += 10;
                    if (progress > 80) {
                        clearInterval(progressInterval);
                    } else {
                        updateProgress(progress, '正在上传和解析文件...');
                    }
                }, 200);
                
                // 第一步：上传文件
                fetch('/upload', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.error || '文件上传失败');
                        });
                    }
                    return response.json();
                })
                .then(uploadData => {
                    clearInterval(progressInterval);
                    updateProgress(90, '正在转换为数据库...');
                    
                    // 第二步：转换为数据库
                    const convertData = {
                        filePath: uploadData.file.path,
                        dbName: `star_db_${versionInput.value}`,
                        tableName: 'star_data',
                        password: document.getElementById('password').value
                    };
                    
                    return fetch('/convert', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(convertData)
                    });
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw new Error(data.error || '数据库转换失败');
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    updateProgress(100, '转换完成！');
                    
                    setTimeout(() => {
                        progressSection.style.display = 'none';
                        resultSection.style.display = 'block';
                        
                        // 更新成功信息，显示记录数
                        const successMessage = document.getElementById('success-message');
                        const rowCount = data.database.tables[0].rows;
                        successMessage.textContent = `转换完成，共${rowCount}条记录！已生成普通数据库和加密数据库：`;
                        
                        // 设置普通数据库下载按钮
                        if (data.database.normal && data.database.normal.filename) {
                            const downloadNormalBtn = document.getElementById('download-normal-btn');
                            const filename = data.database.normal.filename;
                            downloadNormalBtn.href = `/download/${filename}`;
                            downloadNormalBtn.download = filename;
                            downloadNormalBtn.style.display = 'inline-block';
                            console.log('设置普通数据库下载文件名:', filename);
                        } else {
                            const downloadNormalBtn = document.getElementById('download-normal-btn');
                            downloadNormalBtn.style.display = 'none';
                            console.log('普通数据库信息缺失，隐藏下载按钮');
                        }
                        
                        // 设置加密数据库下载按钮
                        if (data.database.encrypted && data.database.encrypted.filename) {
                            const downloadEncryptedBtn = document.getElementById('download-encrypted-btn');
                            const filename = data.database.encrypted.filename;
                            downloadEncryptedBtn.href = `/download/${filename}`;
                            downloadEncryptedBtn.download = filename;
                            downloadEncryptedBtn.style.display = 'inline-block';
                            console.log('设置加密数据库下载文件名:', filename);
                        } else {
                            const downloadEncryptedBtn = document.getElementById('download-encrypted-btn');
                            downloadEncryptedBtn.style.display = 'none';
                            console.log('加密数据库信息缺失，隐藏下载按钮');
                        }
                    }, 500);
                })
                .catch(error => {
                    clearInterval(progressInterval);
                    progressSection.style.display = 'none';
                    showError(error.message || '转换过程中出错');
                });
            }
            
            // 更新进度条
            function updateProgress(percent, text) {
                progressBar.style.width = `${percent}%`;
                progressBar.textContent = `${percent}%`;
                progressText.textContent = text;
            }
            
            // 显示错误信息
            function showError(message) {
                errorMessage.textContent = message;
                errorSection.style.display = 'block';
                uploadSection.style.display = 'block';
                formSection.style.display = 'none';
                progressSection.style.display = 'none';
                resultSection.style.display = 'none';
            }
            
            // 重新开始按钮
            restartBtn.addEventListener('click', () => {
                resetAll();
            });
            
            errorRestartBtn.addEventListener('click', () => {
                resetAll();
            });
            
            // 完全重置
            function resetAll() {
                resetForm();
                errorSection.style.display = 'none';
                resultSection.style.display = 'none';
                uploadSection.style.display = 'block';
                document.getElementById('feature-intro').style.display = 'block';
            }
            
            // 下载按钮的处理已经通过HTML5的download属性实现
        });
    </script>
</body>
</html>